<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>礼物愿望推荐 - 社交心愿平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        
        /* 顶部导航 */
        .navbar {
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            background-color: white;
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #2563eb;
        }
        
        /* 页面标题区域 */
        .page-header {
            padding: 2rem 0;
            text-align: center;
        }
        
        .page-title {
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.75rem;
        }
        
        .page-subtitle {
            color: #64748b;
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* 分类标签 */
        .category-nav {
            margin-bottom: 2rem;
            overflow-x: auto;
            padding-bottom: 0.5rem;
        }
        
        .category-nav::-webkit-scrollbar {
            height: 6px;
        }
        
        .category-nav::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            border-radius: 3px;
        }
        
        .category-list {
            display: flex;
            gap: 0.75rem;
            min-width: max-content;
        }
        
        .category-item {
            padding: 0.5rem 1.25rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            background-color: white;
            border: 1px solid #e2e8f0;
            color: #64748b;
            white-space: nowrap;
        }
        
        .category-item.active {
            background-color: #2563eb;
            color: white;
            border-color: #2563eb;
        }
        
        .category-item:hover:not(.active) {
            border-color: #cbd5e1;
            color: #334155;
        }
        
        /* 筛选工具栏 */
        .filter-bar {
            background-color: white;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .sort-control {
            width: auto;
            padding: 0.375rem 1rem;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
        }
        
        /* 愿望卡片容器 */
        .wish-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }
        
        /* 愿望卡片 */
        .wish-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.04);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .wish-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
        }
        
        /* 特殊卡片样式 */
        .featured-card {
            grid-column: span 2;
            flex-direction: row;
        }
        
        .wide-card {
            grid-column: span 2;
        }
        
        /* 媒体容器 */
        .wish-media {
            position: relative;
            width: 100%;
            flex-shrink: 0;
            background-color: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        /* 媒体容器尺寸 */
        .media-regular {
            height: 200px;
        }
        
        .media-wide {
            height: 250px;
        }
        
        .media-featured {
            width: 50%;
            height: auto;
            min-height: 300px;
        }
        
        /* 无图片状态 */
        .no-image {
            color: #94a3b8;
            text-align: center;
            padding: 2rem 1rem;
            width: 100%;
        }
        
        .no-image i {
            font-size: 3rem;
            margin-bottom: 0.75rem;
            color: #60a5fa;
        }
        
        /* 多图网格布局 */
        .image-grid {
            display: grid;
            width: 100%;
            height: 100%;
            gap: 2px;
        }
        
        .one-img {
            grid-template-columns: 1fr;
        }
        
        .two-img {
            grid-template-columns: 1fr 1fr;
        }
        
        .three-img {
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        
        .three-img img:first-child {
            grid-column: 1;
            grid-row: 1 / 3;
        }
        
        .four-img {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        
        .wish-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .wish-card:hover .wish-media img {
            transform: scale(1.05);
        }
        
        /* 图片数量指示 */
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 0.75rem;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 价格标签 */
        .price-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            background-color: #ef4444;
            color: white;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        /* 卡片内容区 */
        .wish-content {
            padding: 1rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .featured-card .wish-content {
            width: 50%;
        }
        
        /* 分类标签 */
        .wish-category {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        
        .cat-electronics {
            background-color: #dbeafe;
            color: #1e40af;
        }
        
        .cat-fashion {
            background-color: #fee2e2;
            color: #991b1b;
        }
        
        .cat-home {
            background-color: #dcfce7;
            color: #166534;
        }
        
        .cat-beauty {
            background-color: #fff7ed;
            color: #c2410c;
        }
        
        .cat-sports {
            background-color: #e0f2fe;
            color: #0369a1;
        }
        
        .cat-experience {
            background-color: #f3e8ff;
            color: #6b21a8;
        }
        
        /* 标题和描述 */
        .wish-title {
            font-weight: 600;
            font-size: 1.1rem;
            color: #1e293b;
            margin-bottom: 0.5rem;
            transition: color 0.2s;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .wish-card:hover .wish-title {
            color: #2563eb;
        }
        
        .wish-desc {
            color: #64748b;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5;
        }
        
        /* 作者信息 */
        .wish-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #f1f5f9;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #f1f5f9;
        }
        
        .author-name {
            font-weight: 500;
            color: #1e293b;
            font-size: 0.9rem;
            margin: 0;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: #94a3b8;
        }
        
        /* 统计和操作区 */
        .wish-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: #64748b;
        }
        
        .action-stats {
            display: flex;
            gap: 1rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .action-buttons {
            display: flex;
            gap: 0.75rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #64748b;
            cursor: pointer;
            transition: all 0.2s;
            padding: 0.25rem;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .action-btn:hover {
            color: #2563eb;
            background-color: #eff6ff;
        }
        
        .action-btn.liked {
            color: #ef4444;
        }
        
        .action-btn.saved {
            color: #f59e0b;
        }
        
        /* 加载更多 */
        .load-more {
            text-align: center;
            margin: 2rem 0 4rem;
        }
        
        .load-more-btn {
            padding: 0.75rem 2rem;
            border-radius: 6px;
            font-weight: 500;
            background-color: white;
            border: 1px solid #2563eb;
            color: #2563eb;
            transition: all 0.2s;
        }
        
        .load-more-btn:hover {
            background-color: #2563eb;
            color: white;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .featured-card, .wide-card {
                grid-column: span 1;
            }
            
            .featured-card {
                flex-direction: column;
            }
            
            .featured-card .wish-media,
            .featured-card .wish-content {
                width: 100%;
            }
            
            .media-featured {
                min-height: 220px;
            }
        }
        
        @media (max-width: 768px) {
            .wish-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
            
            .page-title {
                font-size: 1.75rem;
            }
        }
        
        @media (max-width: 576px) {
            .wish-grid {
                grid-template-columns: 1fr;
            }
            
            .wish-actions {
                flex-wrap: wrap;
                gap: 0.75rem;
            }
            
            .action-buttons {
                margin-top: 0.5rem;
                width: 100%;
                justify-content: flex-end;
            }
            
            .media-regular {
                height: 180px;
            }
            
            .media-wide {
                height: 220px;
            }
        }
        
        /* 动画效果 */
        .animate-in {
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg py-3">
        <div class="container">
            <a href="#" class="logo d-flex align-items-center gap-2">
                <i class="fas fa-gift text-primary"></i>
                <span>心愿礼物</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto gap-4">
                    <li class="nav-item">
                        <a href="#" class="nav-link active fw-medium">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">探索</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">我的愿望</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">消息</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-primary" style="color: white;">
                            <i class="fas fa-plus me-1"></i> 发布愿望
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-4">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">为你推荐的礼物愿望</h1>
            <p class="page-subtitle">发现朋友们的心愿清单，找到合适的礼物给他们惊喜，或者获取灵感添加自己的愿望</p>
        </div>
        
        <!-- 分类导航 -->
        <div class="category-nav">
            <div class="category-list container">
                <div class="category-item active">全部推荐</div>
                <div class="category-item">电子产品</div>
                <div class="category-item">时尚服饰</div>
                <div class="category-item">家居生活</div>
                <div class="category-item">美妆个护</div>
                <div class="category-item">运动户外</div>
                <div class="category-item">创意礼品</div>
                <div class="category-item">体验服务</div>
                <div class="category-item">书籍文具</div>
            </div>
        </div>
        
        <!-- 筛选工具栏 -->
        <div class="filter-bar d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div class="d-flex align-items-center gap-2">
                <span class="text-muted">排序方式:</span>
                <select class="sort-control">
                    <option value="recommend">智能推荐</option>
                    <option value="newest">最新发布</option>
                    <option value="popular">热门优先</option>
                    <option value="price-low">价格从低到高</option>
                    <option value="price-high">价格从高到低</option>
                </select>
            </div>
            
            <div class="d-flex align-items-center gap-2">
                <span class="text-muted">显示:</span>
                <button class="action-btn active" title="网格视图">
                    <i class="fas fa-th"></i>
                </button>
                <button class="action-btn" title="列表视图">
                    <i class="fas fa-list"></i>
                </button>
            </div>
        </div>
        
        <!-- 愿望卡片网格 -->
        <div class="wish-grid">
            <!-- 精选愿望卡片 - 3张图片 -->
            <div class="wish-card featured-card animate-in">
                <div class="wish-media media-featured">
                    <div class="image-grid three-img">
                        <img src="https://picsum.photos/800/800?random=10" alt="无线降噪耳机展示图1">
                        <img src="https://picsum.photos/400/400?random=11" alt="无线降噪耳机展示图2">
                        <img src="https://picsum.photos/400/400?random=12" alt="无线降噪耳机展示图3">
                    </div>
                    <div class="image-count">
                        <i class="fas fa-images"></i> 3
                    </div>
                    <div class="price-badge">¥1,299</div>
                </div>
                
                <div class="wish-content">
                    <span class="wish-category cat-electronics">电子产品</span>
                    <h3 class="wish-title">希望拥有一副高品质无线降噪耳机，享受沉浸式音乐体验</h3>
                    
                    <p class="wish-desc">
                        每天通勤时间较长，希望能有一副降噪效果好的无线耳机，隔绝外界噪音。主要关注音质和佩戴舒适度，预算在1500元以内。心仪型号有索尼WH-1000XM5或Bose QuietComfort Ultra，有使用过的朋友可以分享一下体验吗？
                    </p>
                    
                    <div class="wish-author">
                        <img src="https://picsum.photos/200/200?random=201" alt="李小华的头像" class="author-avatar">
                        <div>
                            <p class="author-name">李小华</p>
                            <div class="post-time">2天前 · 音乐爱好者</div>
                        </div>
                    </div>
                    
                    <div class="wish-actions">
                        <div class="action-stats">
                            <div class="stat-item" title="浏览量">
                                <i class="far fa-eye"></i>
                                <span>2.4k</span>
                            </div>
                            <div class="stat-item" title="评论数">
                                <i class="far fa-comment"></i>
                                <span>56</span>
                            </div>
                            <div class="stat-item" title="点赞数">
                                <i class="far fa-heart"></i>
                                <span>328</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn" title="点赞">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn" title="收藏">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn" title="评论">
                                <i class="far fa-comment"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 4张图片的愿望 -->
            <div class="wish-card wide-card animate-in">
                <div class="wish-media media-wide">
                    <div class="image-grid four-img">
                        <img src="https://picsum.photos/600/600?random=20" alt="户外露营套装展示1">
                        <img src="https://picsum.photos/600/600?random=21" alt="户外露营套装展示2">
                        <img src="https://picsum.photos/600/600?random=22" alt="户外露营套装展示3">
                        <img src="https://picsum.photos/600/600?random=23" alt="户外露营套装展示4">
                    </div>
                    <div class="image-count">
                        <i class="fas fa-images"></i> 4
                    </div>
                    <div class="price-badge">¥1,599</div>
                </div>
                
                <div class="wish-content">
                    <span class="wish-category cat-sports">运动户外</span>
                    <h3 class="wish-title">想要一套完整的露营装备，计划国庆假期和朋友去露营</h3>
                    
                    <p class="wish-desc">
                        包含3-4人帐篷、睡袋、防潮垫、折叠桌椅和便携炉具。希望装备轻便易携带，质量可靠，适合新手使用。预算在2000元左右，有推荐的品牌或套装吗？
                    </p>
                    
                    <div class="wish-author">
                        <img src="https://picsum.photos/200/200?random=202" alt="王大明的头像" class="author-avatar">
                        <div>
                            <p class="author-name">王大明</p>
                            <div class="post-time">5天前 · 户外爱好者</div>
                        </div>
                    </div>
                    
                    <div class="wish-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.8k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>42</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>256</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-comment"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 1张图片的愿望 -->
            <div class="wish-card animate-in">
                <div class="wish-media media-regular">
                    <div class="image-grid one-img">
                        <img src="https://picsum.photos/600/600?random=30" alt="复古机械键盘图片">
                    </div>
                    <div class="image-count">
                        <i class="fas fa-images"></i> 1
                    </div>
                    <div class="price-badge">¥699</div>
                </div>
                
                <div class="wish-content">
                    <span class="wish-category cat-electronics">电子产品</span>
                    <h3 class="wish-title">想要一款复古风格的机械键盘，提升工作效率</h3>
                    
                    <p class="wish-desc">
                        每天需要大量打字，希望能有一个手感好的机械键盘。偏好青轴或茶轴，无线连接，复古打字机风格设计更佳。
                    </p>
                    
                    <div class="wish-author">
                        <img src="https://picsum.photos/200/200?random=203" alt="张文静的头像" class="author-avatar">
                        <div>
                            <p class="author-name">张文静</p>
                            <div class="post-time">1天前 · 文案编辑</div>
                        </div>
                    </div>
                    
                    <div class="wish-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.2k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>31</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>189</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-comment"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图片的愿望 -->
            <div class="wish-card animate-in">
                <div class="wish-media media-regular">
                    <div class="no-image">
                        <i class="fas fa-utensils"></i>
                        <div>高端餐厅体验</div>
                    </div>
                </div>
                
                <div class="wish-content">
                    <span class="wish-category cat-experience">体验服务</span>
                    <h3 class="wish-title">希望获得一家米其林餐厅的双人晚餐体验</h3>
                    
                    <p class="wish-desc">
                        和妻子结婚五周年纪念日快到了，想给她一个惊喜。希望能有一家环境好、菜品精致的米其林餐厅双人套餐，预算3000元左右。
                    </p>
                    
                    <div class="wish-author">
                        <img src="https://picsum.photos/200/200?random=204" alt="刘建国的头像" class="author-avatar">
                        <div>
                            <p class="author-name">刘建国</p>
                            <div class="post-time">3天前 · 企业经理</div>
                        </div>
                    </div>
                    
                    <div class="wish-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>987</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>24</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>156</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-comment"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 2张图片的愿望 -->
            <div class="wish-card animate-in">
                <div class="wish-media media-regular">
                    <div class="image-grid two-img">
                        <img src="https://picsum.photos/600/600?random=40" alt="北欧风格沙发图片1">
                        <img src="https://picsum.photos/600/600?random=41" alt="北欧风格沙发图片2">
                    </div>
                    <div class="image-count">
                        <i class="fas fa-images"></i> 2
                    </div>
                    <div class="price-badge">¥2,499</div>
                </div>
                
                <div class="wish-content">
                    <span class="wish-category cat-home">家居生活</span>
                    <h3 class="wish-title">寻找一款北欧风格的三人沙发，适合小户型客厅</h3>
                    
                    <p class="wish-desc">
                        新家装修中，需要一款尺寸适中的三人沙发，北欧简约风格，浅灰色或米白色，面料透气易打理。希望坐感舒适，有良好的靠背支撑。
                    </p>
                    
                    <div class="wish-author">
                        <img src="https://picsum.photos/200/200?random=205" alt="陈明的头像" class="author-avatar">
                        <div>
                            <p class="author-name">陈明</p>
                            <div class="post-time">6天前 · 室内设计师</div>
                        </div>
                    </div>
                    
                    <div class="wish-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.5k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>37</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>210</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-comment"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 3张图片的愿望 -->
            <div class="wish-card animate-in">
                <div class="wish-media media-regular">
                    <div class="image-grid three-img">
                        <img src="https://picsum.photos/600/600?random=50" alt="护肤品套装展示1">
                        <img src="https://picsum.photos/600/600?random=51" alt="护肤品套装展示2">
                        <img src="https://picsum.photos/600/600?random=52" alt="护肤品套装展示3">
                    </div>
                    <div class="image-count">
                        <i class="fas fa-images"></i> 3
                    </div>
                    <div class="price-badge">¥899</div>
                </div>
                
                <div class="wish-content">
                    <span class="wish-category cat-beauty">美妆个护</span>
                    <h3 class="wish-title">想要一套适合干性肌肤的秋冬护肤品套装</h3>
                    
                    <p class="wish-desc">
                        秋冬季节皮肤特别干燥，希望能有一套保湿效果好的护肤品。包含洁面、爽肤水、精华和面霜，最好是天然成分，适合敏感肌使用。
                    </p>
                    
                    <div class="wish-author">
                        <img src="https://picsum.photos/200/200?random=206" alt="林小美的头像" class="author-avatar">
                        <div>
                            <p class="author-name">林小美</p>
                            <div class="post-time">4天前 · 美妆博主</div>
                        </div>
                    </div>
                    
                    <div class="wish-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>2.1k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>63</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>342</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-comment"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图片的愿望 -->
            <div class="wish-card animate-in">
                <div class="wish-media media-regular">
                    <div class="no-image">
                        <i class="fas fa-plane"></i>
                        <div>旅行体验</div>
                    </div>
                </div>
                
                <div class="wish-content">
                    <span class="wish-category cat-experience">体验服务</span>
                    <h3 class="wish-title">希望获得一次周末温泉度假酒店双人套餐</h3>
                    
                    <p class="wish-desc">
                        工作压力大，想和男朋友一起去周边的温泉度假酒店放松一下。希望包含住宿和温泉门票，最好能有按摩服务优惠。
                    </p>
                    
                    <div class="wish-author">
                        <img src="https://picsum.photos/200/200?random=207" alt="赵燕的头像" class="author-avatar">
                        <div>
                            <p class="author-name">赵燕</p>
                            <div class="post-time">2天前 · 护士</div>
                        </div>
                    </div>
                    
                    <div class="wish-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.3k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>29</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>205</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-comment"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 1张图片的愿望 -->
            <div class="wish-card animate-in">
                <div class="wish-media media-regular">
                    <div class="image-grid one-img">
                        <img src="https://picsum.photos/600/600?random=60" alt="羊毛混纺大衣图片">
                    </div>
                    <div class="image-count">
                        <i class="fas fa-images"></i> 1
                    </div>
                    <div class="price-badge">¥1,699</div>
                </div>
                
                <div class="wish-content">
                    <span class="wish-category cat-fashion">时尚服饰</span>
                    <h3 class="wish-title">想要一件高品质羊毛混纺大衣，适合职场穿着</h3>
                    
                    <p class="wish-desc">
                        秋冬季节需要一件百搭的大衣，希望是羊毛混纺材质，黑色或深灰色，中长款，适合职场场合穿着，保暖又有型。
                    </p>
                    
                    <div class="wish-author">
                        <img src="https://picsum.photos/200/200?random=208" alt="孙倩的头像" class="author-avatar">
                        <div>
                            <p class="author-name">孙倩</p>
                            <div class="post-time">1天前 · 市场总监</div>
                        </div>
                    </div>
                    
                    <div class="wish-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.7k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>45</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>278</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-comment"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <div class="load-more">
            <button class="load-more-btn">
                <i class="fas fa-refresh me-2"></i>加载更多愿望
            </button>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white py-5 border-top">
        <div class="container text-center">
            <div class="mb-3">
                <a href="#" class="text-muted me-3"><i class="fab fa-weibo"></i></a>
                <a href="#" class="text-muted me-3"><i class="fab fa-wechat"></i></a>
                <a href="#" class="text-muted"><i class="fab fa-instagram"></i></a>
            </div>
            <p class="text-muted mb-0">© 2023 心愿礼物社交平台 - 让每一份心意都能被实现</p>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 卡片动画显示
            const animateElements = document.querySelectorAll('.animate-in');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        setTimeout(() => {
                            entry.target.style.opacity = '1';
                            entry.target.style.transform = 'translateY(0)';
                        }, index * 100);
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            animateElements.forEach(el => observer.observe(el));
            
            // 分类切换
            const categoryItems = document.querySelectorAll('.category-item');
            categoryItems.forEach(item => {
                item.addEventListener('click', function() {
                    categoryItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    // 这里可以添加实际的分类筛选逻辑
                });
            });
            
            // 视图切换
            const viewButtons = document.querySelectorAll('.action-btn[title="网格视图"], .action-btn[title="列表视图"]');
            const wishGrid = document.querySelector('.wish-grid');
            
            viewButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    viewButtons.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    if (this.title === '列表视图') {
                        wishGrid.style.gridTemplateColumns = '1fr';
                    } else {
                        wishGrid.style.gridTemplateColumns = 'repeat(auto-fill, minmax(300px, 1fr))';
                    }
                });
            });
            
            // 点赞功能
            const likeButtons = document.querySelectorAll('.action-btn[title="点赞"]');
            likeButtons.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const icon = this.querySelector('i');
                    const statItem = this.closest('.wish-actions').querySelector('.stat-item:nth-child(3) span');
                    let count = parseInt(statItem.textContent.replace(/,/g, ''));
                    
                    if (icon.classList.contains('far')) {
                        // 点赞
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                        statItem.textContent = (count + 1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                    } else {
                        // 取消点赞
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        statItem.textContent = (count - 1).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                    }
                });
            });
            
            // 收藏功能
            const saveButtons = document.querySelectorAll('.action-btn[title="收藏"]');
            saveButtons.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const icon = this.querySelector('i');
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('saved');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('saved');
                    }
                });
            });
            
            // 评论按钮
            const commentButtons = document.querySelectorAll('.action-btn[title="评论"]');
            commentButtons.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const title = this.closest('.wish-card').querySelector('.wish-title').textContent;
                    alert(`查看 "${title}" 的评论区`);
                });
            });
            
            // 卡片点击事件
            const wishCards = document.querySelectorAll('.wish-card');
            wishCards.forEach(card => {
                card.addEventListener('click', function() {
                    const title = this.querySelector('.wish-title').textContent;
                    alert(`查看愿望详情: ${title}`);
                });
            });
            
            // 加载更多按钮
            const loadMoreBtn = document.querySelector('.load-more-btn');
            loadMoreBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                icon.classList.add('fa-spin');
                this.disabled = true;
                
                // 模拟加载延迟
                setTimeout(() => {
                    icon.classList.remove('fa-spin');
                    this.disabled = false;
                    alert('已加载全部推荐内容');
                }, 1500);
            });
            
            // 排序功能
            const sortSelect = document.querySelector('.sort-control');
            sortSelect.addEventListener('change', function() {
                console.log('排序方式变更为: ' + this.value);
                // 这里可以添加实际排序逻辑
            });
        });
    </script>
</body>
</html>

